<!--
 * @Author: fisher
 * @Date: 2024-03-04 15:14:17
 * @LastEditors: fisher luthor-li@qq.com
 * @LastEditTime: 2024-03-09 23:37:31
 * @FilePath: \allfront\src\modules\cloud\instance\ueclientDialog.vue
 * @Description: 
-->
<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="连接状态"
    width="1000"
    :destroy-on-close="true"
  >
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="userId" label="用户id" width="120" />
      <el-table-column property="clientIp" label="用户ip地址" width="120" />
      <el-table-column
        property="uploadDate"
        label="连接时间"
        show-overflow-tooltip
      />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="KickOff(scope.row)">
            强制下线
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose } from 'vue';
import { useAxios } from '@/hooks/useAxios';
const { post, get } = useAxios();
// 弹窗状态
const dialogFormVisible = ref(false);
let tableData = reactive([]);
const props = defineProps({
  ueclientData: {
    type: Object,
    default() {
      return {};
    },
  },
});
const handleData = data => {
  tableData.length = 0;
  if (data) {
    tableData.push(...data.connections);
  } else {
    tableData.push(...props.ueclientData.connections);
  }
  console.log(props.ueclientData);
};

const KickOff = data => {
  post('/ueinstance/closeClient', {
    instanceId: props.ueclientData.id,
    connectionId: data.id,
  }).then(() => {
    // console.log('kick off res', res);
    // console.log(props.ueclientData);
    // 刷新数据
    get('/ueinstance/getInstanceById', { id: props.ueclientData.id }).then(
      ins => {
        handleData(ins.data);
      },
    );
  });
};
defineExpose({ dialogFormVisible, handleData });
</script>
